<template>
  <div id="big_div">
    <van-nav-bar
      title="提交装备资料"
      left-arrow
      left-text="返回"
      @click-left="onClickLeft"
      class="van-hairline--surround"
    />

    <van-form @submit="onSubmit" class="van-hairline--surround">
      <h2 class="test">基础信息</h2>
      <van-cell-group inset>
        <van-field
          v-model="zb_name"
          name="装备名称"
          label="装备名称"
          placeholder="装备名称"
          :rules="[{ required: true, message: '请填写装备名称' }]"
        />
        <van-field
          v-model="zb_type"
          is-link
          readonly
          name="picker"
          label="装备类型"
          placeholder="点击选择装备类型"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </van-cell-group>
      <h2 class="test">装备属性</h2>
      <van-cell-group>
        <attrs
          v-for="(item, index) in items"
          :key="index"
          :index="index"
          :items="items"
          @deleteIndex="del"
          @uploadData="getData"
        >
        </attrs>
        <van-button type="primary" size="large" plain @click="add"
          >新增属性</van-button
        >
      </van-cell-group>

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Form, Field, CellGroup, NavBar } from 'vant'
import { Toast, Picker, Popup, Col, Row } from 'vant'
import { ref } from 'vue'
import attrs from './attrs'
import axis from 'axios'
export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [NavBar.name]: NavBar,
    [Picker.name]: Picker,
    [Toast.name]: Toast,
    [Popup.name]: Popup,
    [Col.name]: Col,
    [Row.name]: Row,
    attrs,
  },
  data() {
    return {
      zb_name: '',
      items: [{}],
      dataRec: [],
      type_data: {},
    }
  },
  setup() {
    const onClickLeft = () => history.back()

    const zb_type = ref('')
    const showPicker = ref(false)
    const columns = []

    const onConfirm = (value) => {
      zb_type.value = value
      showPicker.value = false
    }
    return {
      onClickLeft,
      zb_type,
      columns,
      onConfirm,
      showPicker,
    }
  },
  mounted: function () {
    this.get_columns()
    this.get_zb_type()
  },
  methods: {
    get_columns: function () {
      axis.get('/apis/get_zb_types').then((response) => {
        this.columns = response.data
      })
    },
    get_zb_type: function () {
      axis.get('/apis/get_zb_types2').then((response) => {
        this.type_data = response.data
      })
    },
    add: function () {
      this.items.push({ id: '', name: '', value: '' })
    },
    del: function (index) {
      //  not allow to delete the first
      if (index !== 0) {
        this.items.splice(index, 1)
        console.log('deleted:', JSON.stringify(this.items))
      }
    },
    //  get the data from child
    getData: function (val) {
      let index = val.index
      this.items[index] = val.data
      console.log('I got the data:', JSON.stringify(this.items))
    },
    onSubmit: function () {
      var attrs_json = { attr_data: this.items }
      var data = {
        name: this.zb_name,
        leixing: this.type_data[this.zb_type],
        attrs_json: JSON.stringify(attrs_json),
        is_save: false,
      }
      axis({
        method: 'post',
        url: '/apis/zbsq/',
        data: data,
      }).then((res) => {
        if (res.status == 201) {
          Toast('提交成功')
          history.back()
        }
      })
    },
  },
}
</script>

<style scoped>
.test {
  margin: 0;
  padding: 32px 16px 16px;
  color: rgba(69, 90, 100, 0.6);
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
}
</style>
